<template>
<div>
    <h1>App根组件---{{count}}</h1>
    <button type="button" class="btn btn-primary" @click="count+=1">+1</button>
    <hr>
    <!-- 方式1：子组件与父组件之间相互传递数据 -->
    <!-- 父组件通过v-bind(:)属性绑定向子组件共享数据，同时子组件需要使用props属性num接收数据 -->
    <!-- @update:num用于接收子组件传递到父组件里面的数据 -->
    <!-- <MySon :num="count" @update:num="getNum"></MySon> -->
    <hr>

    <!-- 方式2：实现子组件与父组件之间数据的双向同步 -->
    <!-- 前提是在子组件里面有对应的props['num']和自定义事件传参的处理this.$emit('update:num',this.num+1);-->
    <MySon v-model:num="count"></MySon>
</div>
</template>

<script>
// 1.导入子组件
import MySon from './Son.vue';
export default{
    name:'MyApp',
    data(){
        return{
            count:0,
        }
    },
    methods: {
        getNum(num){
            this.count=num;
        }
    },
    // 2.注册子组件
    components:{
        MySon,
    }
}
</script>

<style lang="less" scoped></style>